<template>
  <div class="container">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-home />
      </a-breadcrumb-item>
      <a-breadcrumb-item>控制面板</a-breadcrumb-item>
      <a-breadcrumb-item>机构维护</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="机构维护">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="机构代码">
                  <a-input v-model="formModel.organizationCode" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="机构名称">
                  <a-input v-model="formModel.organizationName" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="机构全称">
                  <a-input v-model="formModel.fullName" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 32px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>搜索
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addNew">
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
            <!-- <a-upload action="/">
              <template #upload-button>
                <a-button> 导入 </a-button>
              </template>
            </a-upload> -->
          </a-space>
        </a-col>
        <a-col
          :span="12"
          class="btn-right-col"
        >
        </a-col>
      </a-row>
     
      <a-table
        row-key="organizationId"
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        :size="'medium'"
        @page-change="onPageChange"
      >
        <template #enable="{ record }">
          <a-switch v-model="record.enabled" disabled />
        </template>
        <template #operations="{ record }">
          <span style="font-size: 1.3em; color: #777;">
          <icon-eye @click="btnView(record)" />&nbsp;
          <icon-edit @click="btnEdit(record)" />&nbsp;
          <icon-delete @click="btnDelete(record, fetchData)" />
          </span>
        </template>
      </a-table>
    </a-card>
    
    <a-modal :visible="modalType>0" modal-class="big" :footer="modalType>1" title="机构详情" @ok="btnEditSave(fetchData)" @cancel="modalType=0">
      <a-form
        :model="currRecord"
        :label-col-props="{ span: 6 }"
        :wrapper-col-props="{ span: 18 }"
        label-align="right"
        :disabled="modalType==1"
      >
        <a-form-item label="机构代码" required>
          <a-input v-model="currRecord.organizationCode" />
        </a-form-item>
        <a-form-item label="机构名称" required>
          <a-input v-model="currRecord.organizationName" />
        </a-form-item>
        <a-form-item label="机构全称" required>
          <a-input v-model="currRecord.fullName" />
        </a-form-item>
        <a-form-item label="机构类型" required>
          <a-select v-model="currRecord.organizationTypeId" :options="entityType" allow-search></a-select>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model="currRecord.remark" />
        </a-form-item>
        <a-form-item label="是否可用">
          <a-switch v-model="currRecord.enabled" />
        </a-form-item>
        <a-form-item label="创建时间">
          <span>{{ formatTime(currRecord.creationTime, 2) }}</span>
        </a-form-item>
        <a-form-item label="创建人">
          <span>{{ currRecord.creatorName }}</span>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { formatTime, getPostData } from '@/utils';
  import useLoading from '@/hooks/loading';
  import type { TableColumnData, TableData } from '@arco-design/web-vue/es/table/interface';
  import { getList } from '@/api/dashboard/orgs';
  import { formModel, pagination, columns } from './const';
  import { modalType, currRecord, btnView, btnEdit, btnEditSave, btnDelete, addNew, getTypes, entityType } from './event';

  const { loading, setLoading } = useLoading(true);

  const renderData = ref<TableData[]>();

  const search = () => {
    pagination.current = 1;
    fetchData();
  };

  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const fetchData = async () => {
    let pdata = getPostData(pagination, formModel.value, 'organizationId');
    setLoading(true);
    const data = await getList(pdata);
    pagination.total = data.totalCount;
    data.items.forEach((a:any, i:number) => {
      a.time = formatTime(a.creationTime, 2);
    });
    renderData.value = data.items;

    setLoading(false);
  };
  fetchData();
  getTypes();
</script>
